<template>
    <div>
        <div class="text"><span style="position:fixed;color: black;left: 10px;font-size: 16px;background-color: white;padding: 10px;border-radius: 10px" @click="goindex">返回</span>笑话大全</div>
       <div class="background">
           <div>
               <img src="../assets/R-C.jpg" alt="">
           </div>
           <div v-if="flag"  class="text">
                今天的没有笑话了，明天再来！
           </div>
           <div v-else>
              <ul>
                  <li v-for="(item,index) in list" :key="index" class="xiaohualist">
                      {{item.content}}
                  </li>
              </ul>
           </div>
       </div>
    </div>

</template>

<script>
    import {xiaohua} from '../api/api'
    export default {
        name: "Joke",
        data(){
          return{
              flag:false,
              list: [],
              id:2,
          }
        },
        methods:{
            goindex(){
                this.$router.push('/index')
            },
        },
        created() {
            xiaohua(1,20).then(res=>{
                console.log(res)
                if(res.data.msg=="ok"){
                    this.flag = false
                    this.list = res.data.result.list

                }
            })
        },

    }
</script>

<style scoped>
    .text {
        /*display: flex;*/
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        text-align: center;
        color: transparent;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(0,skyblue),color-stop(1,hotpink));
        -webkit-background-clip: text;
    }
    .background img {
        width: 100%;
    }
    .xiaohualist {
        margin: 10px;
        margin-bottom: 30px;
        text-indent: 1.5em;
        box-shadow: 0px 5px 10px gray;
        /*box-sizing: border-box;*/
    }

</style>